<template>
    <el-dialog :model-value="dialogTableVisible" :title="type==='update'?'修改信息':'增加信息'" :before-close="handleClose">
        <el-form :model="curGoods" label-width="120px">
            <el-form-item label="品名" label-position="top">
                <el-input v-model="curGoods.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="价格" label-position="top">
                <el-input v-model="curGoods.goods_price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="类别" label-position="top">
                <el-cascader :options="this.goodsClass" v-model="goods_class" :show-all-levels="false">
                    <template #default="{ node, data }">
                        <span>{{data.name}}</span>
                    </template>
                </el-cascader>
            </el-form-item>
            <el-form-item label="图标" label-position="top" v-if="type==='update'" >
                <el-upload action="http://127.0.0.1:8080/upload/icon"
                           :limit="1"
                           :show-file-list="true"
                           name="multipartFile"
                           :data="curGoods"
                           :auto-upload="true"
                           :on-success="uploadSuccess"
                           accept="image/png,image/jpg,image/jpeg"
                           :http-request="uploadFile"
                           :file-list="iconList"
                           :on-exceed="handleExceed"
                            >
                    <template #trigger>
                        <el-button type="primary" @click="this.uploadUrl='/upload/icon'">点击上传</el-button>
                    </template>
                    <template #tip>
                        <div>
                            <p class="img-info">支持jpg,jpeg,png格式</p>
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="轮播图" label-position="top" v-if="type==='update'">
                <el-upload action="http://127.0.0.1:8080/upload/swiper"
                           :limit="5"
                           :show-file-list="true"
                           name="multipartFile"
                           :data="curGoods"
                           :auto-upload="true"
                           :on-success="uploadSuccess"
                           :http-request="uploadSwiper"
                           accept="image/png,image/jpg,image/jpeg"
                            >
                    <template #trigger>
                        <el-button type="primary" @click="this.uploadUrl='/upload/swiper'">点击上传</el-button>
                    </template>
                    <template #tip>
                        <div>
                            <p class="img-info">支持jpg,jpeg,png格式,最多上传5张图片</p>
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="详情介绍" label-position="top" v-if="type==='update'">
                <el-upload action="http://127.0.0.1:8080/upload/introduce"
                           :limit="1"
                           :show-file-list="true"
                           name="multipartFile"
                           :auto-upload="true"
                           :data="curGoods"
                           :on-success="uploadSuccess"
                           :http-request="uploadIntroduce"
                           accept="image/png,image/jpg,image/jpeg"
                            >
                    <template #trigger>
                        <el-button type="primary" @click="this.uploadUrl='/upload/introduce'">点击上传</el-button>
                    </template>
                    <template #tip>
                        <div>
                            <p class="img-info">支持jpg,jpeg,png格式</p>
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            


            <el-form-item>
                <template style="display: flex; justify-content: space-around; align-items: center;width: 100%;">
                    <el-button v-if="type === 'update'" type="primary" @click="modify">修改</el-button>
                    <el-button v-if="type === 'insert'" type="primary" @click="add">增加</el-button>
                </template>
            </el-form-item>
        </el-form>
    </el-dialog>
    
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import {mapState,mapMutations} from 'vuex'
export default{
    data(){
        return{
            goods_class:null,
            uploadUrl:null,
            icon:[],
            iconList:[],
        }
    },
    methods:{
        handleExceed(){
            ElMessage(({
                message:"图片数量超出限制，请删除后再上传",
                type:"error"
            }))
        },
        handleClose(){
            this.$emit("beforeClose")
        },
        modify(){
            this.update()
        },
        update(){
            this.curGoods.goods_class = this.goods_class[this.goods_class.length-1]
            axios.put("/api/public/v1/goods/modify",this.curGoods)
            .then(res => {
                console.log(res.data)
                if(res.data.meta.status==200){
                    ElMessage({
                        message: '修改成功',
                        type: 'success',
                    })
                    this.$emit("commit")
                }
                else{
                    alert(res.data.message)
                }
            })
        },
        add(){
            this.curGoods.goods_class = this.goods_class[this.goods_class.length-1]
            this.insert()
        },
        insert(){
            axios.post("/api/public/v1/goods",this.curGoods)
            .then(res => {
                if(res.data.meta.status==200){
                    ElMessage({
                        message: '添加成功',
                        type: 'success',
                    })
                    this.$emit("commit")
                }
                else{
                    alert(res.data.message)
                }
            })
        },
        uploadSuccess(res){
            ElMessage({
                message: '上传成功',
                type: 'success',
            })
        },
        uploadFile(item){
            ElMessage({
                message:"文件上传中",
                type:"info"
            })
            let formData = new FormData()
            formData.append('multipartFile',item.file)
            formData.append('id',this.curGoods.id)
            axios({
                method:'post',
                url:this.uploadUrl,
                data:formData
            }).then(res=>{
                if(res.data.meta.status==200){
                    ElMessage({
                        message: '上传成功',
                        type: 'success',
                    })
                    this.$emit("commit")
                }
                else{
                    alert(res.data.message)
                }
            })
        },
        
    },
    props:{
        dialogTableVisible:Boolean,
        curGoods:Object,
        type:String,
    },
    computed:{
        ...mapState('goods',['goodsClass'])
    }
}
</script>
<style scoped>
    .img-info{
        font-size: 12px;
    }

</style>